<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<view class="headimage">
			<u-swiper :list="piclist" previousMargin="30" nextMargin="30" circular autoplay radius="10"
				bgColor="#f5f5fa"></u-swiper>
		</view>
		<view class="info-blank-public">
			<view class="info-blank-title">小区数据</view>
			<u-line direction="row" length="600rpx" color="#dadee7" margin="0rpx 55rpx"></u-line>
			<view class="info-blank-content">
				<view class="info-block">
					<text class="info-block-data">{{info.insidecarcount}}</text>
					<text class="info-block-title">小区车辆</text>
				</view>
				<view class="info-block">
					<text class="info-block-data">{{info.parkcount}}</text>
					<text class="info-block-title">车位总数</text>
				</view>
			</view>
		</view>
		<view class="info-blank-private">
			<view class="info-blank-title">我的数据</view>
			<u-line direction="row" length="600rpx" color="#dadee7" margin="0rpx 55rpx"></u-line>
			<view class="info-blank-content">
				<view class="info-block-left">
					<text class="info-block-data">{{info.mycarcount}}</text>
					<text class="info-block-title">我的车辆</text>
				</view>
				<u-line direction="col" length="180rpx" color="#c0c4cc" margin="20rpx 0rpx"></u-line>
				<view class="info-block-right">
					<view class="info-block-dataline">
						<text class="info-block-dataline-leftdata">小区内：{{info.myinsidecarcount}}</text>
						<text class="info-block-dataline-rightdata">停车位：{{info.myparkcount}}</text>
					</view>
					<view class="info-block-dataline">
						<text class="info-block-dataline-leftdata">房产数：{{info.myhousecount}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//看板信息
				info: {
					insidecarcount: "-", //小区内车辆数
					parkcount: "-", //小区总停车位数
					mycarcount: "-", //我的车辆数
					myinsidecarcount: "-", //我的小区内车辆数
					myparkcount: "-", //我的停车位数
					myhousecount: "-", //我的房产数
				},
				//用户信息
				userInfo: {
					id: "",
					name: "",
					phone: "",
					idnumber: "",
					wxid: "",
					photo: "",
					cars: [],
					houses: [],
					parks: [],
					bindstatus: 0, //	绑定状态
					changestatus: 0, //	信息变更状态
					photostatus: 0, //	头像变更状态
				},
				//轮播图列表
				piclist: [
					'/static/picture/title.jpg',
					'/static/picture/security.jpg',
					'/static/picture/cartoon.jpg',
				],

				//参数信息
				option: {},

				//登录态与token
				responseResult: [],
				islogin: false,
				mytoken: '',
			};
		},
		methods: {
			//从服务器获取用户信息并存储到缓存
			getUser() {
				uni.request({
					url: getApp().globalData.baseUrl+'/landlord/getMe',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + this.mytoken
					},
					success: (res) => {
						console.log(res.data);
						this.responseResult = res.data;
						if (this.responseResult.success == true) {
							uni.setStorageSync("Id", this.responseResult.data.landlord.id)
							uni.setStorageSync("Name", this.responseResult.data.landlord.name)
							uni.setStorageSync("Phone", this.responseResult.data.landlord.phone)
							uni.setStorageSync("IdNumber", this.responseResult.data.landlord.idNumber)
							uni.setStorageSync("WxId", this.responseResult.data.landlord.wxId)
							uni.setStorageSync("Photo", this.responseResult.data.landlord.photo)
							uni.setStorageSync("Cars", this.responseResult.data.cars)
							uni.setStorageSync("Houses", this.responseResult.data.houses)
							uni.setStorageSync("Parks", this.responseResult.data.parks)
							uni.setStorageSync("BindStatus", this.responseResult.data.landlord.bindStatus)
							uni.setStorageSync("ChangeStatus", this.responseResult.data.landlord.changeStatus)
							uni.setStorageSync("PhotoStatus", this.responseResult.data.landlord.photoStatus)
						} else {
							this.$refs.uNotify.warning(this.responseResult.errorMsg)
						}
					},
					fail: (err) => {
						this.$refs.uNotify.error("请求错误: 获取用户信息失败")
					}
				});
			},
			//从缓存获取用户信息
			setUser() {
				this.userInfo.id = uni.getStorageSync("Id")
				this.userInfo.name = uni.getStorageSync("Name")
				this.userInfo.phone = uni.getStorageSync("Phone")
				this.userInfo.idnumber = uni.getStorageSync("IdNumber")
				this.userInfo.wxid = uni.getStorageSync("WxId")
				this.userInfo.photo = uni.getStorageSync("Photo")
				this.userInfo.cars = uni.getStorageSync("Cars")
				this.userInfo.houses = uni.getStorageSync("Houses")
				this.userInfo.parks = uni.getStorageSync("Parks")
				this.userInfo.bindstatus = uni.getStorageSync("BindStatus")
				this.userInfo.changestatus = uni.getStorageSync("ChangeStatus")
				this.userInfo.photostatus = uni.getStorageSync("PhotoStatus")
			},
			//从服务器获取公共看板数据并存储到缓存
			getCount() {
				uni.request({
					url: getApp().globalData.baseUrl+'/landlord/noLogin/getCount',
					method: 'GET',
					success: (res) => {
						this.responseResult = res.data;
						if (this.responseResult.success == true) {
							this.info.insidecarcount = this.responseResult.data.insideCarCount
							this.info.parkcount = this.responseResult.data.parkCount
							uni.setStorageSync("InsideCarCount", this.responseResult.data.insideCarCount)
							uni.setStorageSync("ParkCount", this.responseResult.data.parkCount)
						} else {
							this.$refs.uNotify.warning(this.responseResult.errorMsg)
						}
					},
					fail: (err) => {
						this.$refs.uNotify.error("请求错误: 获取公共信息失败")
					}
				});
			},
		},
		computed: {
			//将用户信息转换为私有看板信息
			toCount() {
				if (this.islogin === true) {
					/* 登录态判定 */
					this.info.mycarcount = this.userInfo.cars.filter(car => car.verifyStatus === 0).length
					this.info.myinsidecarcount = this.userInfo.cars.filter(car => car.outside === 0).length
					this.info.myparkcount = this.userInfo.parks.length
					this.info.myhousecount = this.userInfo.houses.filter(house => house.verifyStatus === 0).length
				}
			},
		},
		onLoad(e) {
			this.getCount() /* 从服务器获取公共看板数据并存储到缓存 */

			//登录态判定
			let token = uni.getStorageSync("MyToken")
			if (token) {
				this.islogin = true
				this.mytoken = token
				this.option = e //获取url后参数
				this.getUser() /* 从服务器获取用户信息并存储到缓存 */
				this.setUser() /* 从缓存获取用户信息 */
			} else {
				this.islogin = false
			}

			//创建时自动刷新页面
			setTimeout(function() {}, 1000);
			uni.startPullDownRefresh();
		},
		//刷新页面
		onPullDownRefresh() {
			//重新获取公共看板信息
			this.getCount()

			if (this.islogin === true) {
				//重新从服务器获取用户信息并存储到缓存
				this.getUser()
			}
			setTimeout(() => {
				//重新从缓存获取用户信息
				this.setUser()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			//如果是登陆成功后跳转过来
			if (this.option.sign == "1") {
				this.$refs.uNotify.success(this.option.msg)
				this.option = {} /* 置空参数 */
				//自动刷新页面
				setTimeout(function() {}, 1000);
				uni.startPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #f5f5fa;
		height: 1500rpx;
		box-sizing: border-box;
	}

	.headimage {
		margin-top: 30rpx;
	}

	.info-blank-public {
		box-shadow: 1px 3px 5px lightgrey;
		align-content: center;
		background: white;
		height: 300rpx;
		width: 710rpx;
		margin: 40rpx 20rpx 40rpx 20rpx;
		border-radius: 10rpx;

		.info-blank-title {
			display: flex;
			align-items: center;
			/* 垂直居中 */
			margin-left: 55rpx;
			text-align: left;
			font-size: 30rpx;
			font-weight: 200;
			height: 80rpx;
		}

		.info-blank-content {
			display: flex;
			flex-direction: row;

			.info-block {
				display: flex;
				flex-direction: column;
				text-align: center;
				height: 220rpx;
				width: 355rpx;

				.info-block-data {
					display: flex;
					align-items: center;
					/* 垂直居中 */
					justify-content: center;
					/* 水平居中 */
					height: 150rpx;
					width: 355rpx;
					font-size: 80rpx;
					font-weight: 2000;
					color: black;
				}

				.info-block-title {
					height: 70rpx;
					width: 355rpx;
					font-size: 30rpx;
					color: black;
				}
			}
		}
	}

	.info-blank-private {
		box-shadow: 1px 3px 5px lightgrey;
		align-content: center;
		background: white;
		height: 300rpx;
		width: 710rpx;
		margin: 40rpx 20rpx 40rpx 20rpx;
		border-radius: 10rpx;

		.info-blank-title {
			display: flex;
			align-items: center;
			/* 垂直居中 */
			margin-left: 55rpx;
			text-align: left;
			font-size: 30rpx;
			font-weight: 200;
			height: 80rpx;
		}

		.info-blank-content {
			display: flex;
			flex-direction: row;

			.info-block-left {
				display: flex;
				flex-direction: column;
				text-align: center;
				height: 220rpx;
				width: 300rpx;

				.info-block-data {
					display: flex;
					align-items: center;
					/* 垂直居中 */
					justify-content: center;
					/* 水平居中 */
					height: 150rpx;
					width: 300rpx;
					font-size: 80rpx;
					font-weight: 2000;
					color: black;
				}

				.info-block-title {
					height: 70rpx;
					width: 300rpx;
					font-size: 30rpx;
					color: black;
				}
			}

			.info-block-right {
				display: flex;
				flex-direction: column;
				text-align: center;
				height: 220rpx;
				width: 410rpx;

				.info-block-dataline {
					display: flex;
					flex-direction: row;
					height: 110rpx;
					width: 410rpx;

					.info-block-dataline-leftdata {
						display: flex;
						align-items: center;
						/* 垂直居中 */
						justify-content: center;
						/* 水平居中 */
						height: 110rpx;
						width: 205rpx;
						font-size: 25rpx;
						color: black;
					}

					.info-block-dataline-rightdata {
						display: flex;
						align-items: center;
						/* 垂直居中 */
						justify-content: center;
						/* 水平居中 */
						height: 110rpx;
						width: 205rpx;
						font-size: 25rpx;
						color: black;
					}
				}
			}

		}
	}
</style>